<template>
  <!-- 头部查询、新增栏 -->
  <el-form :inline="true" class="demo-form-inline">
    <el-form-item>
      <el-input v-model.trim="name" placeholder="输入供应商" />
    </el-form-item>
    <el-form-item>
      <el-select v-model="supData.value">
        <el-option
          v-for="item in supData.supState"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="querySupplier">查询</el-button>
      <el-button @click="handelNewAdd">新增</el-button>
    </el-form-item>
  </el-form>

  <!-- 分割线 -->
  <el-divider />

  <!-- 表格数据 -->
  <el-table border :data="supplierList" style="width: 100%">
    <el-table-column prop="name" label="供应商名称" width="200" />
    <el-table-column prop="state" label="状态" width="150" />
    <el-table-column prop="level" label="采购优先" width="150" />
    <el-table-column prop="contacts" label="负责人" width="150" />
    <el-table-column prop="code" label="信用码" width="250" />
    <el-table-column prop="devices_state" label="设备状态" width="150" />
    <el-table-column prop="production" label="产地" width="340" />
    <el-table-column label="操作" width="200">
      <el-button text @click="handelDetail">详情</el-button>
      <el-button text @click="handelEdit">编辑</el-button>
      <el-button text @click="handelApproval">审批</el-button>
    </el-table-column>
    <template #empty>
      <el-empty description="暂无数据" />
    </template>
  </el-table>
  <div class="pagination">
    <el-pagination
      background
      small
      layout="prev, pager, next"
      :total="total"
      :page-sizes="sizes"
      @current-change="handelPages"
    />
  </div>
</template>

<script>
import { supplierQuery } from "../../../apis/Purchase/supplier";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
  data() {
    return {
      name: "",
      supplierList: [],
      total: 0,
      sizes: 10,
      pages: 1,
      supData: {
        supState: [
          {
            value: "A",
            label: "全部",
          },
          {
            value: "N",
            label: "新建",
          },
          {
            value: "Y",
            label: "合作中",
          },
          {
            value: "C",
            label: "已取消",
          },
        ],
        value: "全部",
      },
    };
  },

  created() {
    this.findSupplierList();
  },

  methods: {
    //查询供应商数据
    async findSupplierList(name, state, size = this.sizes, page = this.pages) {
      try {
        const result = await supplierQuery({
          name,
          state,
          size,
          page,
        });
        this.supplierList = result.data.rows;
        this.total = result.data.count;
      } catch (error) {
        console.log("error:", error);
      }
    },

    //查询供应商信息
    querySupplier() {
      this.supplierList.forEach((item) => {
        if (item.name === this.name) {
          this.findSupplierList(this.name);
        }
        if (!this.name) {
          this.findSupplierList();
        }
      });
    },

    //跳转添加供应商
    handelNewAdd() {
      this.$router.push("/purchase/supplier/edit");
    },

    //跳转详情页面
    handelDetail() {
      this.$router.push("/purchase/supplier/detail");
    },

    //跳转编辑页面
    handelEdit() {
      this.$router.push("/purchase/supplier/edit");
    },

    //弹出审批模态框
    handelApproval() {
      ElMessageBox.prompt("请填写审批意见", "确认建立关系", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          ElMessage({
            type: "success",
            message: `您的审批意见是:${value}！`,
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "您的审批已取消！",
          });
        });
    },

    // 页码改变，翻页查询数据
    handelPages(e) {
      this.pages = e;
      this.findSupplierList();
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  float: right;
  line-height: 50px;
  .el-form-item {
    margin: 0 10px;
  }
}
.el-divider {
  margin-top: 50px;
}
.pagination {
  width: 100%;
  height: 50px;
  position: fixed;
  left: 0;
  bottom: 50px;
  // .el-pagination {
  //   margin: 13px calc(100% / 2);
  // }
}
.el-table {
  .el-button {
    padding: 5px;
    color: blue;
  }
}
</style>
